<template>
  <div class="controller">
    <p>管理者信息</p>
    <el-form :model="list" class="header">
          <el-form-item label="管理者编号" style="width: 200px">
            <el-input v-model="search" placeholder="请输入用户编号" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="职务" style="width: 200px">
            <el-input v-model="list.position" placeholder="请输入用户昵称" />
          </el-form-item>
          <el-form-item label="注册时间">
        <el-date-picker
          v-model="list.date"
          type="daterange"
          range-separator="至"
          start-placeholder="起始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary">查询</el-button>
            <el-button type="success" @click="handleAdd">添加</el-button>
            <el-button :icon="Download" class="100px" @click="handledownload" style="background-color: #9e83f8;color: #fff;"/>
          </el-form-item>
        </el-form>
    <el-table :data="filterTableData" style="width: 100%;">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="ID" prop="id" />
      <el-table-column label="用户id" prop="userId" />
      <el-table-column label="商品id" prop="productId" />
      <el-table-column label="订单编号" prop="orderNo" />
      <el-table-column label="订单状态" prop="status" />
      <el-table-column label="家具类别" prop="itemInfo" />
      <el-table-column label="购买数量" prop="itemCount" />
      <el-table-column label="商品单价" prop="sigPrice" />
      <el-table-column label="价格" prop="itemPrice" />
      <el-table-column label="快递公司" prop="notes" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="下单时间" prop="orderCreateTime" />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 删除确认框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <span>是否下架此产品</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handrevess">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加弹出框 -->
    <el-dialog v-model="addProductDialogVisible" title="添加管理者" width="40%">
      <div>
        <el-form :model="newProduct" >
          <el-form-item label="编号" >
            <el-input v-model="newProduct.id" style="width: 50%" placeholder="请输入编号" />
          </el-form-item>
          <el-form-item label="姓名" >
            <el-input v-model="newProduct.name" style="width: 50%" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="性别">
            <el-autocomplete
        v-model="newProduct.sex"
        :fetch-suggestions="querySearch"
        clearable
        class="inline-input w-50"
        style="width: 50%"
        placeholder="请输入性别"
      />
          </el-form-item>
          <el-form-item label="职务" >
            <el-input v-model="newProduct.position" style="width: 50%" placeholder="请输入职务" />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="newProduct.iphone" style="width: 50%" placeholder="请输入联系方式" />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="newProduct.address" style="width: 50%" placeholder="请输入地址" />
          </el-form-item>
          <el-form-item label="注册时间">
            <el-date-picker
            v-model="newProduct.date"
            type="date"
            label="Pick a date"
            placeholder="请输入日期"
            style="width: 50%"
            value-format="YYYY-MM-DD"
          />
          </el-form-item>
          <el-form-item label="权限">
        <el-button type="info" size="small" v-model="newProduct.purview">权限</el-button>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addProductDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addProduct">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改框 -->
  <el-dialog v-model="dialogFormVisible" title="修改管理者信息" width="40%">
    <div>
        <el-form :model="reviseProduct">
          <el-form-item label="编号">
            <el-input v-model="reviseProduct.id" style="width: 50%" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="reviseProduct.name" style="width: 50%" />
          </el-form-item>
          <el-form-item label="性别">
            <el-autocomplete
        v-model="reviseProduct.sex"
        :fetch-suggestions="querySearch"
        clearable
        class="inline-input w-50"
        style="width: 50%"
        placeholder="请输入性别"
      />
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="reviseProduct.position" style="width: 50%" />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="reviseProduct.iphone" style="width: 50%" />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="reviseProduct.address" style="width: 50%" />
          </el-form-item>
          <el-form-item label="注册时间">
            <el-date-picker
            v-model="reviseProduct.date"
            type="date"
            label="Pick a date"
            placeholder="请输入日期"
            style="width: 50%"
            value-format="YYYY-MM-DD"
          />
          </el-form-item>
          <el-form-item label="权限">
            <el-button type="info" size="small" v-model="reviseProduct.purview">权限</el-button>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </span>
  </template>
</el-dialog>
  </div>
</template>

<script lang= "ts" setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { utils, writeFileXLSX } from 'xlsx'
import { Download } from '@element-plus/icons-vue'
import{ getState } from '../../api/state'

// 订单状态数据
const loadState = async () => {
  const result = await getState()
  console.log(result)
}
loadState()

const dialogVisible = ref(false) // 删除
// 查询
const search = ref('')

// 添加
const addProductDialogVisible = ref(false)
const newProduct = ref<Partial<TableData>>({})

// 修改
const reviseProduct = ref<any>();
const dialogFormVisible = ref(false)
// 数据格式
interface TableData {
    id: number;
    address: null | string;
    itemCount: number;
    itemInfo: string;
    itemPrice: number | number;
    notes: string;
    orderCreateTime: string;
    orderNo: string;
    productId: number;
    sigPrice: null;
    status: number;
    userId: number;
}
const tableData = ref([
{
  "id": 62,
  "userId": 27,
  "productId": 66,
  "orderNo": "sit exercitation in in",
  "status": 97,
  "itemInfo": "eiusmod deserunt exercitation",
  "itemCount": 58,
  "sigPrice": null,
  "itemPrice": 56,
  "notes": "deserunt",
  "address": "上海滨州市青县",
  "orderCreateTime": "1975-09-28 09:16:34"
}
])
const list = reactive({
  id: '',
  position: '',
  date: '',
})
// 查询
const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !search.value ||
      data.id.toLowerCase().includes(search.value.toLowerCase())
  )
)
// 添加
const handleAdd = () => {
  addProductDialogVisible.value = true;
}
const addProduct = () => {
  if (newProduct.value.id && newProduct.value.id) {
    const product: any = {
      id: (tableData.value.length + 1).toString(),
      ...newProduct.value,
      srcList: [newProduct.value.id],
    }

    tableData.value.push(product)
    newProduct.value = {}
    addProductDialogVisible.value = false
    console.log('添加了', product);

  } else {
    ElMessage.error('请填写必要的管理者信息')
  }
}

// 修改
const handleEdit = (row: TableData) => {
  console.log('修改',row);
  reviseProduct.value = row;
  dialogFormVisible.value = true;
}
const handleSave = () => {
  // 遍历原始数据，找到与当前行数据相同的数据，并将其替换为修改后的数据
  for (let i = 0; i < tableData.value.length; i++) {
    if (tableData.value[i].id === reviseProduct.value.id) {
      tableData.value[i] = reviseProduct.value;
      break;
    }
  }
  console.log('修改了');
  
  dialogFormVisible.value = false;
}

// 删除
const delateId = ref('1234')
const handleDelete = (row: any) => {
  console.log('删除');
  delateId.value = row.id;
  dialogVisible.value = true;
}
// 删除逻辑
const handrevess = () => {
  tableData.value = tableData.value.filter((item: any) => item.id !== delateId.value)
  console.log(tableData.value);


  dialogVisible.value = false;

}
// 禁用
const doAllow = (row: any) => {
  row.status = !row.status
  
}
//导出文件
const handledownload = () => {
  // 将待导出数据转换为 sheet 工作表中要使用到的数据，并生成工作表
  const ws = utils.json_to_sheet(tableData.value)
  // 创建新工作簿
  const wb = utils.book_new()
  // 将工作表追加到工作簿中
  utils.book_append_sheet(wb, ws, '管理者列表详情表')
  // 将内存中的工作簿数据写入文件中
  console.log(ws,wb)
  writeFileXLSX(wb, `table-${new Date().toISOString()}.xlsx`)
  console.log('data:')
}
// 性别自动补全框
interface RestaurantItem {
  value: string
}
const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

const loadAll = () => {
  return [
    { value: '男' },
    { value: '女' },
  ]
}

onMounted(() => {
  restaurants.value = loadAll()
})
</script>

<style lang= "less" scoped>
.header {
  display: flex;
  justify-content: space-between;
}
</style>